<template>
  <div id="operateManage">
    <!-- 运营管理背景 -->
    <div class="title"></div>
    <div class="content">
      <!-- 标题 -->
      <div class="carTitle"></div>
      <div class="carContent">
        <!-- 进度条 -->
        <div style="font-size: 26px">
          <span class="text">总数</span>
          <span class="free">{{ amount }}</span>
          <span>个</span>
        </div>
        <div class="progress">
          <div class="aside">
            <el-popover placement="right" trigger="click">
              <div>
                <el-button size="mini" @click="showUsed('B1')"
                  >负一层
                </el-button>
                <el-button size="mini" @click="showUsed('B2')"
                  >负二层
                </el-button>
              </div>
              <div slot="reference" class="text">已用</div>
            </el-popover>
            <div>
              <span class="used">{{ success }}</span>
            </div>
          </div>
          <div
            class="greyblock"
            v-for="(index, i) in 50"
            :class="{ firLevel: i < (success / amount) * 50 }"
            :key="index"
          ></div>
          <div class="aside">
            <el-popover placement="right" trigger="click">
              <div>
                <el-button size="mini" @click="showCar('B1')">负一层</el-button>
                <el-button size="mini" @click="showCar('B2')">负二层</el-button>
              </div>
              <div slot="reference" class="text">空闲</div>
            </el-popover>
            <div>
              <span class="free">{{ amount - success }}</span>
            </div>
          </div>
        </div>
        <div id="chart"></div>
      </div>
      <div class="jinchuTitle"></div>
      <!-- 滚动效果 -->
      <div class="rollTitle">
        <el-row>
          <el-col :span="3">序号</el-col>
          <el-col :span="7">车牌号</el-col>
          <el-col :span="7">进出类型</el-col>
          <el-col :span="7">时间</el-col>
        </el-row>
      </div>
      <div class="vue-seamless" @click="showTurnDetails($event)">
        <vue-seamless-scroll :data="jinchuData" class="seamless-warp">
          <ul>
            <li v-for="item in jinchuData" :key="item.id" :date-item="item">
              <el-row>
                <el-col
                  :span="3"
                  class="rollItem"
                  style="font-family: dig; font-weight: 900; font-size: 30px"
                  :data-obj="JSON.stringify(item)"
                  >{{ item.id }}
                </el-col>
                <el-col
                  :span="7"
                  class="rollItem"
                  :data-obj="JSON.stringify(item)"
                  >{{ item.carNum }}</el-col
                >
                <el-col
                  :span="7"
                  class="rollItem"
                  :data-obj="JSON.stringify(item)"
                >
                  <span v-if="item.type === '出'" class="zc">{{
                    item.type
                  }}</span>
                  <span v-else class="cr">{{ item.type }}</span>
                </el-col>
                <el-col
                  :span="7"
                  class="rollItem"
                  :data-obj="JSON.stringify(item)"
                  >{{ item.date }}</el-col
                >
              </el-row>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
      <!-- 点击显示进出详情 -->
      <div class="turn-details" v-if="isShowDetail">
        <div class="details-header">
          <div class="details-header-title">进出记录信息详情</div>
          <div class="details-header-close">
            <span @click="closeTurn">×</span>
          </div>
        </div>
        <div class="details-body">
          <div class="details-info">
            <div class="turn-order">序号：{{ info.id }}</div>
            <div class="car-number">车牌号：{{ info.carNum }}</div>
            <div class="turn-type">进出类型：{{ info.type }}</div>
            <div class="turn-time">时间：{{ info.date }}</div>
          </div>
          <div class="details-img">
            <el-image
              style="width: 100%; height: 490px"
              :src="imgPath"
              fit="fill"
            ></el-image>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: "operate",
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      amount: 600,
      success: 200,
      socket: null,
      jinchuData: [],
      isShowDetail: false,
      info: {},
      imgPath: "",
      echartXAxis: [],
      myChart: null,
      curlength: 7,
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      if (this.myChart !== null) {
        this.myChart.dispose();
      }
      this.myChart = this.$echarts.init(document.getElementById("chart"));
      let option = {
        color: ["rgba(255, 230, 67,1)", "rgba(48, 201, 243,1)"],
        grid: {
          left: "10%",
        },
        legend: {
          data: [
            {
              name: "已用",
              textStyle: {
                color: "rgb(255, 230, 67)",
                fontSize: 30,
              },
            },
            {
              name: "空闲",
              textStyle: {
                color: "rgb(0,150,255)",
                fontSize: 30,
              },
            },
          ],
          x: "right",
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            fontSize: 26,
          },
        },
        xAxis: [
          {
            name: "日期",
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              interval:0,  
              textStyle: {
                color: "#fff",
                fontSize: 26,
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 1)",
                fontSize: 26,
              },
            },
            nameTextStyle: {
              fontSize: 26,
            },

            data: this.echartXAxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "数量",
            min: 0,
            // max: 100,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#fff",
                fontSize: 26,
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 1)",
              },
            },
            nameTextStyle: {
              fontSize: 26,
            },
          },
        ],
        series: [
          {
            name: "已用",
            type: "bar",
            data: this.echartUsed,
            itemStyle: {
              borderColor: "rgba(255, 230, 67,1)",
            },
          },
          {
            name: "空闲",
            type: "bar",
            data: this.echartFree,
            itemStyle: {
              borderColor: "rgba(48, 201, 243,1)",
            },
          },
        ],
      };

      this.myChart.setOption(option);
    },
    addclass({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return "firFont";
      }
    },

    init() {},
    showUsed(lc) {
      window.isFir = true;
      let params = {
        id: "B2_车位_405",
        type: 1,
      };
      window.Sgworld.execute("grapi", "CarLine", { visibility: false }, null);
      if (lc == "B1") {
        for (var i = 100; i < 200; i++) {
          params.id = "B1_车位_" + i;
          window.Sgworld.execute("grapi", "ParkingLot", params, null);
        }
      } else {
        for (var i = 400; i < 500; i++) {
          params.id = "B2_车位_" + i;
          window.Sgworld.execute("grapi", "ParkingLot", params, null);
        }
      }

      window.Sgworld.flyTo(
        -3483.971435546875,
        -2845.02099609375,
        3884.89453125,
        0,
        -80.4999771118164,
        91.43999481201172,
        4000,
        () => {},
        4
      );
      window.Sgworld.execute("grapi", "ShowPark", { floor: lc }, null);
      window.Sgworld.execute("grapi", "ShowBuilding", { num: lc }, null);
      // window.UEGetAll();
    },
    showCar(lc) {
      // 根据传入的楼层显示所有的停车位;
      window.Sgworld.execute("grapi", "ShowPark", { floor: lc }, null);
      window.Sgworld.execute("grapi", "ShowBuilding", { num: lc }, null);
    },
    // 显示详细进出信息
    showTurnDetails(e) {
      this.isShowDetail = true;
      let value = JSON.parse(e.target.dataset.obj);
      window.Sgworld&&window.Sgworld.clearAllCovering();
      if (value.type === "进") {
        window.Sgworld &&
          window.Sgworld.flyTo(
            12076.123046875,
            -5596.8271484375,
            10,
            0,
            -35,
            96,
            275,
            () => {},
            4
          );
      } else {
        window.Sgworld &&
          window.Sgworld.flyTo(
            12644,
            -5181,
            10,
            0,
            -35.809967041015625,
            -96.23989868164062,
            274.60662841796875,
            () => {},
            4
          );
      }
      // 处理图片地址
      this.imgPath = value.pic.replace(/\\/g, "/");
      this.info = value;
    },
    closeTurn() {
      this.isShowDetail = !this.isShowDetail;
    },
  },
  sockets: {
    // 获取停车场统计数据
    sendParkingStatus(data) {
      let sendParkingInfo = JSON.parse(data);
      this.amount = sendParkingInfo.total;
      this.success = sendParkingInfo.used;
    },
    // 获取进出统计信息
    sendParkingStatistics(data) {
      this.echartXAxis = [];
      this.echartFree = [];
      this.echartUsed = [];
      let statisticsInfo = JSON.parse(data);
      for (let i = 0; i < statisticsInfo.data.length; i++) {
        var temstr = statisticsInfo.data[i].date.substring(5,10);
        this.echartXAxis.push(temstr);
      }
      var len = statisticsInfo.data.length;
      if (len >= 7) {
        this.curlength = 7;
        var sevenDaysData = statisticsInfo.data.slice(-7);
      } else {
        this.curlength = len;
        var sevenDaysData = statisticsInfo.data.slice(-this.curlength);
      }

      for (var i = 0; i < sevenDaysData.length; i++) {
        this.echartUsed.push(parseInt(sevenDaysData[i].enter));
        this.echartFree.push(parseInt(sevenDaysData[i].out));
      }
      this.initCharts();
      // for (let i = 0; i < statisticsInfo.data.length; i++) {
      //   let item = statisticsInfo.data[i];
      //   this.echartXAxis.push(item.date);
      //   this.echartFree.push(item.out);
      //   this.echartUsed.push(item.enter);
      // }
    },
    // 获取进出记录
    sendParkingRecord(data) {
      let recordInfo = JSON.parse(data);
      this.jinchuData = [];
      for (let i = 0; i < recordInfo.data.length; i++) {
        let item = recordInfo.data[i];
        this.jinchuData.push({
          id: i + 1,
          pic: item.url,
          carNum: item.licensePlate,
          type: item.inOutType,
          date: item.date.split(" ")[1],
        });
      }
    },
  },
};
</script>
<style scoped>
.content {
  position: relative;
}
.seamless-warp {
  height: 480px;
  overflow: hidden;
}
.vue-seamless .seamless-warp li {
  cursor: pointer !important;
}

#operateManage {
  padding: 5px 68px;
  box-sizing: border-box;
}
.title {
  width: 645px;
  height: 112px;
  background: url("../../../../../static/images/operate.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
  margin-left: -30px;
}
.carTitle,
.jinchuTitle {
  width: 732px;
  height: 65px;
  background: url("../../../../../static/images/parking.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 25px;
}
.jinchuTitle {
  background: url("../../../../../static/images/jinchu.png");
}
.carContent {
  margin-top: 30px;
  text-align: center;
}
.progress {
  width: 770px;
  height: 40px;
  margin: 20px 0;
  float: left;
  cursor: pointer;
}
.greyblock {
  width: 7px;
  height: 40px;
  margin-left: 5px;
  float: left;
  background-color: gainsboro;
}
.firLevel {
  background-color: #ffe643;
}
.total {
  color: #ffffff;
  font-size: 42px;
}
.free {
  color: #30c9f3;
  font-size: 42px;
}
.used {
  color: #ffe643;
  font-size: 42px;
}
.aside {
  float: left;
  width: 80px;
  font-size: 26px;
  text-align: center;
  margin-top: -40px;
}
#chart {
  width: 800px;
  height: 500px;
  margin-top: 110px;
  margin-bottom: 20px;
}
.jinchuTable {
  margin-top: 20px;
}
.text {
  font-size: 28px;
  color: #b4e0f0;
}
.zc,
.cr {
  display: inline-block;
  width: 80px;
  height: 35px;
  line-height: 35px;
  font-size: 26px;
  border-radius: 5px;
  background: #0b98fe;
}
.cr {
  background: #f6a411;
}
/* 进出详情 */
.turn-details {
  width: 1200px;
  height: 800px;
  position: absolute;
  left: 1379px;
  top: 0;
  font-size: 35px;
  background: url("../../../../../static/images/operate/backgroundimg.jpg");
  background-size: 100% 100%;
  opacity: 0.8;
  font-family: Source Han Sans SC;
  border-radius: 10px;
  z-index: 5000;
}
.turn-details .details-header {
  overflow: hidden;
  padding: 50px;
  border-bottom: 2px solid deepskyblue;
}
.turn-details .details-header .details-header-title {
  float: left;
}
.turn-details .details-header .details-header-close {
  float: right;
  cursor: pointer;
}
.turn-details .details-header .details-header-close:hover {
  color: #00a2ff;
}
.turn-details .details-body {
  overflow: hidden;
  padding: 50px 100px;
}
.turn-details .details-body .details-info {
  float: left;
  width: 40%;
}
.turn-details .details-body .details-info div {
  margin-bottom: 95px;
}
.turn-details .details-body .details-img {
  float: left;
  background-color: #fff;
  width: 60%;
  height: 490px;
}
</style>
